<!--  -->
<template>
  <div class="courseDetail" style="padding: 20px">
    <div style="margin-bottom: 10px">
      <!-- <el-page-header @back='goBack' content=''></el-page-header> -->
      <el-button type="primary" @click="goBack">返回</el-button>
    </div>
    <div class="titleLine">课程信息</div>
    <span class="courseName">课程名称：{{ courseInfo.courseName }}</span>
    <div style="display: flex">
      <div class="imageBox">
        <el-image
          :src="host + courseInfo.homePage"
          style="width: 340px; height: 230px; margin-right: 10px"
        >
          <div slot="error" class="image-slot noImage">暂无封面</div>
        </el-image>
      </div>
      <div class="uploadFileBox">
        <div
          v-if="originPath == '/exper/views/teacher/teachManager'"
          style="margin-top: 200px"
        >
          <el-button type="primary" @click="upLoadCourse"
            >课程资料上传</el-button
          >
        </div>
        <div v-if="originPath == '/exper/views/student/courseCheck'">
          <!-- <el-descriptions :column="1" style="display:inline-block" :colon='true'>
            <el-descriptions-item label="导师">{{courseInfo.teacherName ? courseInfo.teacherName : '暂无'}}</el-descriptions-item>
            <el-descriptions-item label="课时">{{courseInfo.costTime ? courseInfo.costTime : '暂无'}}</el-descriptions-item>
          </el-descriptions> -->
          <el-button
            type="primary"
            @click="studentSignUp"
            style="margin-top: 20px"
            >{{ isBm == 0 ? "报名" : "已报名" }}</el-button
          >
        </div>
      </div>
    </div>
    <div class="titleLine">导师介绍</div>
    <div class="courseName">
      {{ teacherInfo.realName ? teacherInfo.realName : "暂无" }}
    </div>
    <div class="marginLeft15 courseDetailDes">
      <el-descriptions :column="2" style="display: inline-block" :colon="true">
        <el-descriptions-item label="毕业院校">{{
          teacherInfo.school ? teacherInfo.school : "暂无"
        }}</el-descriptions-item>
        <el-descriptions-item label="毕业时间">{{
          teacherInfo.graduationDate ? teacherInfo.graduationDate : "暂无"
        }}</el-descriptions-item>
        <el-descriptions-item label="所属专业">{{
          teacherInfo.majorCourse ? teacherInfo.majorCourse : "暂无"
        }}</el-descriptions-item>
        <el-descriptions-item label="评级职称">
          {{
            teacherInfo.ratingTitle ? teacherInfo.ratingTitle : "暂无"
          }}</el-descriptions-item
        >
        <el-descriptions-item :span="2" label="经历">
          {{ teacherInfo.experience ? teacherInfo.experience : "暂无" }}
        </el-descriptions-item>
        <el-descriptions-item :span="2" label="获奖情况">
          {{ teacherInfo.awardGetList ? teacherInfo.awardGetList : "暂无" }}
        </el-descriptions-item>
        <el-descriptions-item :span="2" label="所讲课程">
          {{ teacherInfo.teachCourse ? teacherInfo.teachCourse : "暂无" }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="titleLine">课程介绍</div>
    <div class="titleWeight">课程概述</div>
    <div class="marginLeft15 courseDetailDes">
      {{ courseInfo.overview || "暂无" }}
    </div>
    <!-- <div class="marginLeft15">
      <el-image :src="host +courseInfo.homePage" style='width:340px;height:230px;margin-right:10px'></el-image>
    </div> -->
    <div class="titleWeight">课程目的</div>
    <div class="marginLeft15 courseDetailDes">
      {{ courseInfo.purpost || "暂无" }}
    </div>
    <div class="titleWeight">课程大纲</div>
    <div class="custom-tree-container">
      <div class="block">
        <el-tree
          :data="treeData"
          node-key="id"
          :expand-on-click-node="false"
          @node-click="myEvent"
          default-expand-all
        >
        </el-tree>
      </div>
    </div>
    <div class="titleLine">预习资料</div>
    <div class="titleWeight">预习资料介绍</div>
    <div class="marginLeft15 courseDetailDes">
      {{ courseInfo.preDataContent || "暂无" }}
    </div>
    <div class="titleWeight">预习资料下载</div>
    <div
      v-show="preDataList.length"
      v-for="it in preDataList"
      :key="it.id"
      style="display: flex"
      class="pointer marginLeft15"
      @click="downLoadFile(it)"
    >
      <div>{{ it.fileName }}</div>
      <div>
        <i class="el-icon-download iconOperate"></i>
      </div>
    </div>
    <div class="marginLeft15 courseDetailDes" v-show="!preDataList.length">
      暂无
    </div>

    <div
      v-if="
        originPath == '/exper/views/student/courseCheck' ||
        originPath == '/teacherDetail'
      "
    >
      <div class="titleWeight">课程资料下载</div>
      <el-tree
        :data="treeData"
        node-key="id"
        :expand-on-click-node="false"
        @node-click="myEvent"
        default-expand-all
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span v-if="!data.isEdit">{{ node.label }}</span>
          <span class="isEdit">
            <span
              v-for="it in data.paths"
              @click="downLoadFile(it)"
              :key="it"
              style="margin-left: 50px; flex: 4"
              >{{ it.fileName }}
              <i class="el-icon-download" style="margin-left: 8px"></i>
            </span>
          </span>
        </span>
      </el-tree>
    </div>
    <el-dialog
      title="课程资料上传"
      :visible.sync="isUpload"
      custom-class="uploadCourseBox"
      :modal-append-to-body="false"
      append-to-body="true"
    >
      <div>
        <el-tree
          :data="treeData"
          node-key="id"
          :expand-on-click-node="false"
          @node-click="myEvent"
          default-expand-all
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span v-if="!data.isEdit">{{ node.label }}</span>
            <span class="isEdit">
              <!-- <span style="margin-left:50px;width:20px"> -->
              <span>
                <el-upload
                  ref="upload"
                  action="#"
                  :on-change="
                    (file, fileList) => handleChange(file, fileList, node, data)
                  "
                  :show-file-list="false"
                  :before-upload="handleBeforeUpload"
                  :on-remove="handleRemove"
                  :file-list="preList"
                  :auto-upload="false"
                  :before-remove="beforeRemove"
                >
                  <el-button type="text" icon="el-icon-upload2"
                    >上传资料</el-button
                  >
                </el-upload>
              </span>
              <span style="line-height: 40px" v-for="it in data.paths" :key="it"
                >{{ it.fileName }}
                <i class="el-icon-delete" style="" @click="deleteFile(it)"></i>
              </span>
            </span>
          </span>
        </el-tree>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import teacherApi from "../api/teacher.service.js";
import operateApi from "../api/operate.service.js";
export default {
  components: {},
  data() {
    return {
      isUpload: false,
      id: null,
      treeData: [],
      courseInfo: {},
      teacherInfo: {},
      preDataList: [],
      host: window.location.href.split("/#/")[0] + "/api",
      originPath: "",
      curUploadUrl: "",
      isBm: 0,
      teacherId: null,
    };
  },
  mounted() {
    this.getList();
  },
  computed: {},
  watch: {},
  methods: {
    goBack() {
      if (this.originPath == "/teacherDetail") {
        this.$router.push({
          path: "/teacherDetail",
          query: {
            data: this.teacherId,
            originPath: "/exper/views/operation/teacherManger",
          },
        });
      } else {
        this.$router.push(this.originPath);
      }
    },
    // 下载附件
    downLoadFile(it) {
      teacherApi.downloadFile(it.fileName, it);
    },
    upLoadCourse() {
      this.isUpload = true;
    },
    async getList() {
      console.log(this.id);
      let { data } = await teacherApi.getDetail({ id: this.id });
      console.log(this.id);
      this.treeData = data.courseSyllabusTree;
      this.courseInfo = data.courseInfo;
      this.teacherInfo = data.teacherInfo;
      this.preDataList = data.preDataList;
      this.isBm = data.isBm;
    },
    upload(node, data) {
      console.log(node, data);
    },
    // 有关上传内容
    handleChange(file, fileList, node, data) {
      // console.log(file, fileList, node, data);
      this.uploadFile(file, fileList, node, data);
    },
    async uploadFile(file, fileList, node, nodeData) {
      let formData = new FormData();
      formData.append("file", file.raw);
      let { data } = await teacherApi.fileUpload(formData);
      let res = await teacherApi.saveSyllabusInfo({
        syllabusId: nodeData.id,
        filePath: data.data.url,
        fileName: data.data.originalFileName,
        courseId: this.courseInfo.id,
      });
      this.$message.success(res.msg);
      this.getList();
      if (nodeData.paths && nodeData.paths.length) {
        this.$set(
          nodeData.paths,
          nodeData.paths.length,
          data.data.originalFileName
        );
      } else {
        this.$set(nodeData, "paths", [data.data.originalFileName]);
      }

      // this.addDataFiles(data.data);
    },
    // 删除上传附件
    async deleteFile(obj) {
      let data = await teacherApi.deleteFile(obj.fileName);
      if (data.code == 10200) {
        this.$message.success("删除附件成功");
        let res = await teacherApi.removeSyllabusFile({
          courseId: this.courseInfo.id,
          id: obj.id,
        });
        this.$message.success(res.msg);
        this.getList();
      }
    },
    // 报名
    async studentSignUp() {
      let data = await teacherApi.studentCourse({
        courseId: this.courseInfo.id,
      });
      if (data.code == 10200) {
        this.$message.success("报名成功");
        this.getList();
      }
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.teacherId = this.$route.query.teacherId;
    this.originPath = this.$route.query.originPath;
  },
};
</script>
<style lang="less" scoped>
.custom-tree-container {
  /deep/.el-tree-node {
    margin-bottom: 5px;
    // white-space: normal;
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  overflow: scroll;
  // align-items: center;
}
.el-tree {
  height: 100%;
  .isEdit {
    width: 100%;
    display: flex;
    // align-items: center;
    justify-content: space-between;
    // flex-wrap: wrap;
    overflow-x: scroll;
    padding-top: 10px;
    .el-input {
      width: 100px;
      height: 5px;
    }
  }
}
.courseName {
  font-size: 18px;
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  margin-left: 20px;
}
.imageBox {
  margin-right: 50px;
}
.courseDetailDes {
  background: #fff;
  padding: 20px;
  border-radius: 15px;
}
</style>
<style lang="less">
@color: rgb(229, 229, 229);
.courseDetail .noImage {
  height: 100%;
  text-align: center;
  line-height: 230px;
  background: @color;
  border-radius: 15px;
}
.uploadCourseBox .el-tree-node,
.uploadCourseBox .el-tree-node__content {
  margin-bottom: 20px;
}
.uploadCourseBox .el-tree-node__content {
  height: 40px;
}
</style>
